<!-- 数据字典配置 -->
<template>
  <el-card shadow="hover" class="layout-padding-auto">
    <el-row class="row">
      <el-col :span="3">
        <el-menu
          :default-active="menuData[0]?.children[0]?.type"
          class="el-menu-vertical-demo"
          background-color="#fff"
          text-color="#2B2B2B"
          active-text-color="#02AD82"
          popper-effect="light"
          :unique-opened="true"
        >
          <el-sub-menu
            v-for="(item, index) in menuData"
            :key="item.type"
            :index="item.type"
          >
            <template #title>
              <span>{{ item.name }}</span>
            </template>

            <el-menu-item
              v-for="(itemChild, index) in item.children"
              :key="itemChild.type"
              :index="itemChild.type"
              @click="itemClick"
              >{{ itemChild.name }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
      <el-col :span="1" class="col-divider">
        <el-divider direction="vertical" class="divider" />
      </el-col>
      <el-col :span="19">
        <DictDetailsTree
          :configType="configType"
          v-if="configType == 'device_type'"
        ></DictDetailsTree>
        <DictDetailsLevel
          :configType="configType"
          v-else-if="configType == 'part_library'"
        ></DictDetailsLevel>
        <DictDetails :configType="configType" v-else></DictDetails>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, defineAsyncComponent } from 'vue'
const DictDetails = defineAsyncComponent(
  () => import('./components/DictDetails.vue')
)
const DictDetailsLevel = defineAsyncComponent(
  () => import('./components/DictDetailsLevel.vue')
)
const DictDetailsTree = defineAsyncComponent(
  () => import('./components/DictDetailsTree.vue')
)

interface TypeData {
  type: string //类型
  name: string //字典名称
  children: Array<any>
}

const configType = ref('device_type')

const menuData: TypeData[] = reactive([
  {
    type: '1',
    name: '设备资产管理',
    children: [
      { type: 'device_type', name: '设备类型' },
      { type: 'factory_type', name: '供应厂家类型' }
    ]
  },
  {
    type: '2',
    name: '设备维修管理',
    children: [{ type: 'failure_level', name: '故障等级' }]
  },
  {
    type: '3',
    name: '设备维保管理',
    children: [{ type: 'maintain_type', name: '维保类型' }]
  },
  {
    type: '4',
    name: '设备点检管理',
    children: [{ type: 'check_type', name: '点检类型' }]
  },
  {
    type: '5',
    name: '设备备件管理',
    children: [
      // { type: 'part_library', name: '备件库' },
      { type: 'part_type', name: '备件类型' },
      { type: 'part_unit', name: '备件单位' },
      { type: 'warehouse_type', name: '入库类型' },
      { type: 'retrieval_type', name: '出库类型' }
    ]
  },
  {
    type: '6',
    name: '知识库管理',
    children: [{ type: 'file_type', name: '文件类型' }]
  },
  {
    type: '7',
    name: '企业设置管理',
    children: [{ type: 'position_type', name: '职位' }]
  }
])

const itemClick = (item: any) => {
  configType.value = item.index
}
</script>

<style scoped lang="scss">
.row {
  display: flex;
  height: 100%;

  .col-divider {
    padding-left: 10px;

    .divider {
      height: 100%;
      padding-left: 10px;
    }
  }
}

// 鼠标 hover 时颜色
.el-menu-hover-bg-color {
  // background-color: var(--next-bg-menuBarActiveColor) !important;
  background-color: transparent !important;
}

.el-menu {
  border-right: none !important;
  width: 100%;
}

.el-menu-item {
  margin: 4px !important;
  height: 36px !important;
  line-height: 36px !important;
}

.el-menu-item.is-active {
  margin: 4px !important;
  border-radius: 4px !important;
  background: transparent !important;
}

.el-menu-item,
.el-sub-menu__title {
  // color: var(--next-bg-menuBarColor);
  // color:var(--el-color-primary) !important;
  color: #4d4d4d !important;
}

//水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
.el-menu-item.is-active,
.el-sub-menu.is-active .el-sub-menu__title,
.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
  // @extend .el-menu-hover-bg-color;
  // background: black !important;
  color: var(--el-color-primary) !important;
}

.el-menu-item:hover {
  @extend .el-menu-hover-bg-color;
  // color:skyblue !important;
}

::v-deep .el-sub-menu.is-active.is-opened .el-sub-menu__title {
  /* // background-color: var(--el-color-primary) !important; */
  background: rgba(2, 173, 130, 0.1) !important;
  border-radius: 4px;
}
</style>
